<!-- 注册页 -->
<template>
	<view class="re_content">
		<!-- 返回上一页 -->
		<view class="re_return">
			<image :src="HTTP_IMG_UTL+'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode=""
				@click="handelReturn" />
			<view></view>
		</view>
		<!-- 注册成为GLUZ会员 文字 -->
		<view class="re_GLUZ_title">
			<view>
				<view v-if="lang==='zh'">
					<span style="font-size: 36rpx;font-weight: bold;">注册成为</span>
					<span style="font-size: 68rpx;font-weight: bold;">GLUZ</span>
					<span style="font-size: 36rpx;font-weight: bold;">用户</span>
				</view>
				<view v-if="lang==='ru'">
					<span style="font-size: 35rpx;font-weight: bold;">Регистрация в </span>
					<span style="font-size: 38rpx;font-weight: bold;margin-left: 5rpx;">GLUZ</span>
				</view>
			</view>
			<view>
				<span v-if="lang==='zh'">Зарегистрироваться как пользователь GLUZ</span>
				<span v-if="lang==='ru'">Регистрация в GLUZ.</span>
			</view>
		</view>
		<!-- 切换语言 -->
		<view class="re_lang">
			<view class="re_lang_ri">
				<view v-for="(item,index) in language" :key="index" @click="handelLang(index)"
					:class="index===indexID?'itemActive':'active'">{{item.name}}</view>
			</view>
		</view>
		<!-- form表单 -->
		<view class="re_form">
			<u-form labelPosition="top" :model="model" ref="uForm">
				
				<u-form-item :label="$t('手机号码')" prop="mobile" >
					<view class="re_mobile">
						<view class="re_mobile_87" @click="handeleAreaCode">+{{AreaCode}}</view>
						<image :src="HTTP_IMG_UTL+'register_223@2x.png'" style="width: 20rpx;height: 12rpx;margin-right: 20rpx;" mode=""/>
						<view class="re_line" style="margin-right: 20rpx;"></view>
						<u-input type="number" maxlength="11" v-model="model.mobile" :placeholder="$t('请输入手机号')"
							clearable :border="border" />
					</view>
				</u-form-item>
				<u-form-item :label="$t('邮箱')" prop="email"  v-if="indexID===1" key="email">
					<u-input v-model="model.email" :placeholder="$t('请输入邮箱')" clearable :border="border" />
				</u-form-item>
				<u-form-item :label="$t('登录密码')" prop="password" >
					<u-input :type="type" v-model="model.password" :placeholder="$t('请输入密码')" clearable :border="border" />
				</u-form-item>
				
				<u-form-item :label="$t('验证码')" prop="captcha" >
					<view class="re_VerificationCode">
						<u-input type="number" v-model="model.captcha" :placeholder="$t('请输入验证码')" :border="border" />
						<view class="re_ver" @click.stop="sendVerificationCode">
							<view class="re_line"></view>
							<view>{{ isCounting ? `${countdown}S` : $t('获取验证码') }}</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item :label="$t('邀请码')">
					<u-input v-model="model.agent_code" :border="border" clearable :placeholder="$t('请填写邀请码（选填）')" />
				</u-form-item>
			</u-form>
		</view>

		<!-- 注册按钮 -->
		<view class="re_but">
			<view style="width: 70%;">
				<u-button class="custom-style"  :disabled="isDisabled" :loading="isLoading"
					@click="handelSubmit">
					{{$t('注册认证')}}
				</u-button>
			</view>
		</view>
		
		<view class="existence" @click="handelAlreadyhaveanaccount">{{$t('已有帐号，立即前往登录')}}</view>
		
		<!-- 隐私政策 -->
		<view class="log_group">
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="log_u-checkbox">
					<u-checkbox active-color="#10B301" @change="checkboxChange" v-model="item.checked"
						v-for="(item, index) in list" :key="index" :name="item.name">
					</u-checkbox>
					<!-- 隐私协议 -->
					<view class="re_Privacy">
						<span style="color: #A4A4A4;">{{$t('注册即代表您已同意我们的')}}</span>
						<span style="color: #000000 ;margin-left: 10rpx;" @click="handelePrivacy">{{$t('服务协议')}}</span>
						<span style="color: #A4A4A4;margin-left: 10rpx;">{{$t('和')}}</span>
						<span style="color: #000000 ;margin-left: 10rpx;" @click="showXy2">{{$t('隐私政策')}}</span>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		
		<!-- 底部弹窗 -->
		<u-picker v-model="iSshow" mode="selector" :range="selectorObj" range-key="name" :confirm-text="$t('确定')"
			:cancel-text="$t('取消')" @confirm="handelConfirm" :default-selector="[AreaCodeIndex]" />
		<view class="backColor"></view>
		
		<!-- 获取权限的功能 -->
		<Permission></Permission>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	// #ifdef APP-PLUS
	import {
		init,
		login
	} from '@/utils/im'	
	// #endif
	import Permission from "@/components/Permission.vue"
	
	export default {
		components: {
			Permission
		},
		data() {
			return {
				list: [{ //协议选择的状态
					name: '协议',
					checked: false,
					disabled: false
				}],
				HTTP_IMG_UTL,
				type: 'password',//密码输入框password模式
				AreaCode: '86', //默认选择的code
				iSshow: false, //控制底部弹窗显示与隐藏
				selectorObj: [{ //code数组
					name: '86'
				}, {
					name: '7'
				}], //切换语言
				isCounting: false, //短信验证码显示文字控制隐藏显示
				countdown: 60, //验证码倒计时60秒
				timer: null, //setInterval
				isDisabled: false, //disabled  防抖
				isLoading: false, //loading
				border: false, //控制隐藏input外边框
				model: { //表单
					agent_code: '', //邀请码
					mobile: '', //手机号码
					password: '', //确认密码
					captcha: '',
					email: '', //验证码
				},
				test: '测试',
				language: [{
					name: '中'
				}, {
					name: 'RU'
				}], //切换语言
				lang: 'zh', //默认语言
				indexID: 0, //下标
				nowLang: 'zh', //获取协议接口使用的当前语言
				xyContent2: '', //隐私内容
				langs:'zh',
				AreaCodeIndex:0
			}
		},
		onShow() {
			this.nowLang = this.$i18n.locale
			this.getLang()
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				//console.log(e);
			},
			// 提交注册
			handelSubmit() {
				const regex = /^[1][3-9][0-9]{9}$/;
				if(this.model.mobile === ''){
					uni.showToast({
						title: this.$t('请输入手机号'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.lang==='zh'){ //如果是中国用户判断
					if(!regex.test(this.model.mobile)){ //正则判断手机号是否正确
						uni.showToast({
							title: this.$t('手机号码不正确'),
							// title:'手机号码不正确',
							icon: 'none',
							duration: 1000
						})
					}else if(this.model.password.length < 8){ //判断密码是否大于8位
						uni.showToast({
							// title: this.$t('手机号码不正确'),
							title:'密码长度必须大于8位',
							icon: 'none',
							duration: 1000
						})
					}else if(this.model.captcha === ''){ //判断验证码是否为空
						uni.showToast({
							title: this.$t('请输入验证码'),
							icon: 'none',
							duration: 1000
						})
					}else {
						// console.log('中国用户调接口');
						this.Submit()
					}
				}else if(this.lang === 'ru'){ //如果是俄罗斯用户判断
					if(this.model.mobile.length !== 10){ //正则判断手机号是否正确
						uni.showToast({
							title: this.$t('手机号码不正确'),
							icon: 'none',
							duration: 1000
						})
					}else if(this.model.password.length < 8){ //判断密码是否大于8位
						uni.showToast({
							title: this.$t('密码长度必须大于8位'),
							icon: 'none',
							duration: 1000
						})
					}else if(this.model.captcha === ''){ //判断验证码是否为空
						uni.showToast({
							title: this.$t('请输入验证码'),
							icon: 'none',
							duration: 1000
						})
					}else if(this.model.email === ''){ //判断邮箱是否为空
						uni.showToast({
							title: this.$t('请输入邮箱'),
							icon: 'none',
							duration: 1000
						})
					} else {
						// console.log('俄罗斯用户调接口');
						this.Submit()
					}
				}

			},
			// 调注册接口
			Submit(){
				// 判断用户是否选则协议
				if (!this.list[0].checked) {
					uni.showModal({
						title: this.$t('温馨提示'),
						content: this.$t('注册前请先阅读并同意GLUZ用户账号的服务协议和隐私政策'),
						cancelText: this.$t('不同意'), // 取消按钮的文字  
						confirmText: this.$t('同意'), // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#DB9C28',
						cancelColor: '#656565',
						success: (res) => {
							if (res.confirm) {
								this.list[0].checked = true
								// 调用登录接口进行登录
								this.setLogin()
								console.log('comfirm') //点击确定之后执行的代码
							} else {
								this.list[0].checked = false
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				} else {
					// 如果协议为真直接调接口
					this.setLogin()
				}
				
			},
			// 选择区号
			handeleAreaCode() {
				// 控制底部弹窗的弹出与收起
				this.iSshow = !this.iSshow
			},
			// 选择语言
			handelConfirm(e) {
				this.AreaCodeIndex = e[0]
				
				// 根据下标切换选择的+86或+7
				this.AreaCode = this.selectorObj[e[0]].name
				
			},
			setLogin(){
				this.isDisabled = true
				this.isLoading = true
				this.model.country = this.indexID
				// this.model.mobile = this.AreaCode==="86"?this.model.mobile:this.AreaCode+this.model.mobile
				this.$u.api.user.newRegister(this.model).then(res => {
					// 注册成功使用账号密码登录
					this.$u.api.user.login({
						account: this.model.mobile, //手机号
						password: this.model.password, //密码
						country: this.indexID, //国家
					}).then(res => {
						if (res) {
							uni.clearStorage(); //清本地缓存
							uni.clearStorageSync(); //清本地缓存
							uni.setStorage({  //设置缓存语言
								key: 'lang',
								data: this.lang,
								success: function() {}
							})
							uni.setStorageSync('startPage', new Date().getTime())
							this.$i18n.locale = this.lang
							getApp().globalData.lang = this.lang
							getApp().globalData.mobile = res.mobile
							uni.setStorageSync('user_id', res.user_id);
							uni.setStorageSync('activityNum', 0);
							uni.setStorageSync('mobile', res.mobile);  //这个和下面存缓存的重复了，拷贝的原登录代码别问为啥这么写
							uni.setStorage({ //这个和上面存缓存的重复了，拷贝的原登录代码别问为啥这么写
								key: 'mobile',
								data: res.mobile,//存手机号
								success: function() {
									uni.setStorage({ //存token
										key: 'xzdToken',
										data: res.token,
									});
								}
							});
							// 给用户一个提示
							uni.showToast({
								title: this.$t('注册成功，已为您自动登录'),
								icon: 'none',
								duration: 1000
							}) 
							// 一秒后跳转到认证页面
							// #ifdef APP-PLUS
							login();
							// #endif
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/user/register/authentication'
								})
							},1000)
							
						}
					})
					this.isDisabled = false
					this.isLoading = false
				}).catch(err => {
					console.log('err:',err);
					this.isDisabled = false
					this.isLoading = false
				})
			},
			// 点击获取短信验证码文字
			sendVerificationCode() {
				// 判断手机号是否为空
				if (this.model.mobile === '') {
					this.$u.toast(this.$t('请输入手机号'));
					return
				}
				if (this.isCounting) return;
				this.getPhoneNumberCode() //调接口发送短信

			},
			// 验证码倒计时逻辑
			startCountdown() {
				this.isCounting = true;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.isCounting = false;
						this.countdown = 60;
					}
				}, 1000);
			},
			// 调接口发送短信验证码
			getPhoneNumberCode() {
				if(this.model.mobile === ''){
					uni.showToast({
						title: this.$t('请输入手机号'),
						icon: 'none',
						duration: 1000
					})
				}else if(this.lang==='ru'&& this.model.email === ''){
					uni.showToast({
						title: this.$t('请输入邮箱'),
						icon: 'none',
						duration: 1000
					})
				}else{
					let data = {
						mobile: this.AreaCode==='86'?this.model.mobile:this.AreaCode+this.model.mobile, //手机号码
						event: this.lang==='zh'?'register':'register_ru', //事件名称：注册=register，重置密码=resetpwd
						langs:this.lang,
						email:this.model.email
					}
					// 调用发送验证码接口 'sendCaptcha'
					this.$u.api.user.sendCaptcha(data).then(res => {
						// 验证码倒计时逻辑
						this.startCountdown();
					})
				}
				
			},
			// 切换语言
			handelLang(index) {
				// 设置手机号选择的+86或+7
				this.AreaCode = this.selectorObj[index].name
				this.indexID = index
				// 切换语言
				if (index === 0) {
					this.lang = 'zh'
					this.langs = 'zh'
				} else {
					this.lang = 'ru'
					this.langs = 'ru'
				}
				/** 设置语言 */
				uni.setStorage({
					key: 'lang',
					data: this.lang
				})
				// 更新语言
				getApp().globalData.lang = this.lang
				this.$i18n.locale = this.lang
			},
			// 返回上一页
			handelReturn() {
				uni.navigateBack()
			},
			// 获取当前缓存语言
			getLang() {
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') {
							this.indexID = 0
							this.lang = 'zh'
							this.AreaCode = '86'
							this.AreaCodeIndex = 0
						} else {
							this.indexID = 1
							this.lang = 'ru'
							this.AreaCode = '7'
							this.AreaCodeIndex = 1
						}
					}
				});
			},
			// 跳转至服务协议页面
			handelePrivacy() {
				this.$u.route({
					url: '/pages/user/privacy/privacy',
					params: {
						type: 'GLUZ用户账号服务协议'
					}
				})
			},

			
			// 跳转至隐私政策
			showXy2() {
				uni.navigateTo({
					url: '/pages/user/privacy/agreement'
				})
			},
			// 已有账号
			handelAlreadyhaveanaccount(){
				uni.navigateBack()
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}

	}
</script>


<style lang="scss" scoped>
	.log_group {
		margin-bottom: 100rpx;
		width: calc(100% - 100rpx);
	}
	.log_u-checkbox {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.backColor{
		width: 100%;
		height: 742rpx;
		background: linear-gradient(180deg, #E1F8C7 -3%, rgba(255, 255, 255, 0.2) 56%);
		position: absolute;
		top: 0;
		z-index: -1;
	}
	.existence{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #A4A4A4;
		margin-top: 28rpx;
		margin-bottom: 38rpx;
	}
	.re_mobile_87 {
		margin-right: 20rpx;
	}

	.re_mobile {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.re_ver {
		width: 210rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.re_line {
		width: 2rpx;
		height: 30rpx;
		// background-color: #FF4E00;
		background: #000000;
	}

	.re_VerificationCode {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}

	.custom-style {
		background-color: #000000;
		color: #ffffff;
	}

	.re_but {
		margin: 80rpx 0rpx 0rpx 0rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.re_Privacy {
		width: 100%;
		display: flex;
		// margin-top: 20rpx;
		justify-content: flex-start;
		align-items: center;
		font-size: 20rpx;
		flex-wrap: wrap;
	}

	.re_form {
		width: calc(100% - 80rpx);
	}

	.active {
		color: #A5A5A5;
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border: 1rpx solid #E2E2E2;
		border-radius: 10rpx;
	}

	.itemActive {
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #707070;
		border-radius: 10rpx;
		color: #FFFFFF;
		background:linear-gradient(to right,#d2ef91,#e6f5cd)
	}

	.re_lang_ri {
		width: 250rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
	}

	.re_lang {
		margin-top: 68rpx;
		width: calc(100% - 100rpx);
		display: flex;
		justify-content: flex-end;
	}

	.re_GLUZ_title {
		margin-top: 8rpx;
		width: calc(100% - 80rpx);
		// height:60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.re_return {
		margin-top: 110rpx;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.re_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// background-color: #ffffff;
	}
</style>